<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA4FG41m0RlufUy9BoCihvSH9FSCowWlNo&v=3.exp&sensor=false"></script>
	<script type="text/javascript">
    	var map, layer;

function initialize() {

  var australia = new google.maps.LatLng(-25, 133);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: australia,
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body onload="initialize()">
    <div id="map-canvas" style="width:100%; height:100%"></div>
  </body>
</html>